<template>
	<div class="recommend-wrap">
		<h2 class="model-title">TA们正在求助拼团</h2>
		<ul class="model-list">
			<li class="model-list-item">
				<img src="../../../assets/image/tuan/touxiang.jpg" alt="" class="item-avatar">
				<div class="item-info">
					<p class="name">139******65</p>
					<em class="sub">"帮我拼团"</em>
				</div>
				<div class="item-msg">
					<p class="msg">还差<em>1</em>人成团</p>
					<p class="item">还有结束</p>
				</div>
				<a href="#" class="item-link">去成团</a>
			</li>
			<li class="model-list-item">
				<img src="../../../assets/image/tuan/touxiang.jpg" alt="" class="item-avatar">
				<div class="item-info">
					<p class="name">139******65</p>
					<em class="sub">"帮我拼团"</em>
				</div>
				<div class="item-msg">
					<p class="msg">还差<em>1</em>人成团</p>
					<p class="item">还有结束</p>
				</div>
				<a href="#" class="item-link">去成团</a>
			</li>
		</ul>
	</div>
</template>

<script>
	import common from '../../../assets/js/common';
	import Vue from 'vue';
	import {Toast, MessageBox} from 'mint-ui';
	//import shareImg from "../../../static/image/shareimg.png";
	export default{
		data (){
			return {
			};
		},
		components: {},
		created (){
		},
		mounted (){
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../../assets/css/common.scss";
	.recommend-wrap {
		padding:rem(11) rem(15) 0 rem(15);
		background-color:#fff;
	}
	.model-title{
		font-size:rem(15);
	}
	.model-list{
		
	}
	.model-list-item{
		border-bottom:1px solid #e7e7e7;
		padding:rem(14) 0;
		.item-avatar{
			width:rem(40);
			height:rem(40);
			border-radius:20px;
			display:inline-block;
			font-size:0;
		    vertical-align: middle;
		    margin-right:rem(8);
		}
		.item-info{
			width:rem(90);
			display:inline-block;
			font-size:rem(13);
			vertical-align: middle;
			margin-right:rem(45);
			.name{
				width:100%;
				height:rem(17);
				overflow:hidden;
				white-space: nowrap;
    			text-overflow: ellipsis;
				color:#333;
			}
			.sub{
				color:#999;
			}
		}
		.item-msg{
			display:inline-block;
			vertical-align: middle;
			font-size:rem(13);
			color:#999;
			em{
				color:#ff6600;
			}
		}
		.item-link{
			width:rem(71);
			height:rem(30);
			line-height:rem(30);
			border:1px solid #ff6600;
			border-radius:15px;
			color:#ff6600;
			background-color:#ffefe5;
			font-size:rem(13);
			float:right;
			text-align:center;
		}
	}
	/*修补型样式*/
	.model-list-item:last-child{
		border:0;
	}
</style>
